﻿// *****头部的下拉菜单的样式
// 1、头部下拉菜单的基础样式
.header_basicMenu{
  border: none !important;
  background: transparent !important;
  .el-menu-item {
    min-width: 100%;
    padding: 0 0 0 20px !important;
  }
  .el-submenu{
    .el-submenu__title{
      min-width: 120px;
      height: 60px;
      line-height: 60px;
      color: #fff !important;
      padding: 0 !important;
      border: none !important;
      font-size: 14px;
      background-color: transparent;
      // 鼠标移入时
      &:hover {
        background: transparent !important;
      }
      // 展示用户信息的块
      .headerUser{
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 0 10px 0 0;
        border-radius: 50%;
      }
    }
    // 右侧的箭头
    .el-submenu__icon-arrow{
      float: right;
      font-size: 22px;
      margin: 20px 0 0 5px;
      color: #fff;
    }
  }
}
// 头部menu的弹框形式
.header_popMenu {
  background-color: rgba(42,44,106,1);
  z-index: 99999 !important;
  .el-menu--popup {
    margin: 0;
    min-width: 140px;
    background-color: transparent;
    .el-menu-item {
      color: $theme_font_color;
      background-color: transparent;
      text-align: center;
    }
    i{
      color: $theme_font_color;
      margin-right: 5px;
      font-size: 20px;
    }
    .el-menu-item:hover,
    .el-menu-item.is-active {
      color: $theme_main_hover_color !important;
      background-color: transparent !important;
      i {
        color:$theme_main_hover_color !important;
      }
    }
  }
}
//      主要内容的布局的样式
.darkContent {
  width: 100%;
  height: 100%;
  // 头部
  .dark_header {
    width: 100%;
    height: 71px;
    position: relative;
    // logo部分
    .dark_header_logo {
      position: absolute;
      top: 0;
      left: 50%;
      height: 70px;
      width: 1136px;
      margin-left: -568px;
      background: url('../images/logo_bg_1136.png') 50% 50% no-repeat;
      z-index: 100;
      .dark_header_logo_text {
        height: 48px;
        line-height: 48px;
        position: absolute;
        left: 50%;
        top: 8px;
        transform: translateX(-50%);
        img {
          float: left;
          margin-right: 16px;
        }
        span {
          float: left;
          font-size: 30px;
          font-weight: 400;
          color:rgba(35,206,253,1);
        }
      }
    }
    // 左边的时间
    .dark_header_time {
      position: absolute;
      left: 20px;
      width: 404px;
      height: 30px;
      top: 12px;
      line-height: 30px;
      padding-left: 20px;
      background: url('../images/time_bg_404.png') 50% 50% no-repeat;
      z-index: 200;
      color: $theme_main_hover_color;
    }
    // 右侧的个人信息
    .dark_header_info {
      position: absolute;
      right: 20px;
      z-index: 200;
      .header_rightInfo {
        // 上部的两个按钮
        .header_iconContent {
          padding: 15px 0;
          margin-right: 20px;
          &>span {
            float: left;
            height: 30px;
            line-height: 30px;
            color:#fff;
            border-right: 1px solid $theme_border_color;
            padding: 0 20px;
            cursor: pointer;
            i{
              font-size: 22px;
              vertical-align: -3px;
            }
          }
          &>span:hover {
            color: $theme_main_color;
          }
          // 设置按钮的块，padding为0
          &>span:last-child {
            padding: 0;
          }
        }
      }
    }
  }
  // 主要的内容区域
  .dark_main {
    width: 100%;
    height: calc(100% - 71px);
    // 左边菜单
    .dark_main_left {
      float: left;
      width: 240px;
      height: 100%;
      background: rgba(48,54,121,1);
      .dark_main_left_collapseBtn {
        width: 100%;
        height: 24px;
        line-height: 24px;
        text-align: right;
        padding-right: 10px;
        span {
          color: #fff;
          cursor: pointer;
          i {
            font-size: 24px;
          }
        }
        &>span:hover {
          color: $theme_main_hover_color;
        }
      }
    }
    // 右侧的主要展示区域
    .dark_main_show {
      margin-left: 270px;
      height: calc(100% - 40px);
      &>div {
        width: 100%;
        height: 100%;
        // 标题部分
        .main_myTitle_dark {
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          padding: 0 10px;
          i {
            margin-right: 6px;
            vertical-align: 0px;
          }
        }
        // 又返回箭头时
        .el-page-header {
          width: 100%;
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
          .el-page-header__left:hover {
            color: $theme_main_hover_color;
          }
        }
        .page_mainContent {
          width: 100%;
          padding: 10px;
          height: calc(100% - 40px);
          overflow: hidden;
          overflow-y: auto;
          background-color: rgba(46,52,118,1);
          &::-webkit-scrollbar{
            width: 6px;
            height: 8px;
            cursor: pointer;
          }
          &::-webkit-scrollbar-track{
            background: rgba(21,130,178,.5);
            border-radius: 2px;
          }
          &::-webkit-scrollbar-thumb{
            background: rgba(21,130,178,1);
            border-radius: 6px;
          }
          &::-webkit-scrollbar-thumb:hover {
            background: $theme_main_hover_color;
          }
        }
        // 分左右结构时
        .page_secondMainContent {
          width: 100%;
          height: calc(100% - 40px);
          background-color: rgba(46,52,118,1);
          // 左侧部分
          .page_leftContent {
            float: left;
            height: 100%;
            width: 25%; 
            padding: 10px;
            border-right: 2px solid #353d84;
            // 上部按钮和检索框的样式
            .page_leftSearchContent {
              width: 100%;
              height: 32px;
              .el-button {
                padding: 0 !important;
                float: right;
                width: 90px;
                font-size: 14px;
                text-align: center;
                overflow: hidden;
              }
              .page_leftSearchInput {
                margin-right: 105px;
                .el-input__inner { 
                  padding: 0 0 0 26px;
                  color: $theme_font_color;
                }
                .el-input__prefix {
                  font-size: 18px;
                  font-weight: 600;
                  color: $theme_font_color;
                  left: 0;
                }
              }
            }
            // 下部的按钮组
            .page_leftBottomBtns {
              width: 100%;
              text-align: center;
              height: 34px;
              margin-top: 14px;
            }
          }
          // 右侧部分
          .page_rightContent {
            float: right;
            width: 75%;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            padding: 10px;
            &::-webkit-scrollbar{
              width: 6px;
              height: 8px;
              cursor: pointer;
            }
            &::-webkit-scrollbar-track{
              background: rgba(21,130,178,.5);
              border-radius: 2px;
            }
            &::-webkit-scrollbar-thumb{
              background: rgba(21,130,178,1);
              border-radius: 6px;
            }
            &::-webkit-scrollbar-thumb:hover {
              background: $theme_main_hover_color;
            }
          }
        }
      }
    }
    // 底部
    .dark_footer {
      margin-left: 270px;
      height: 40px;
      line-height:40px;
      text-align: center;
      color: $theme_font_color;
    }
  }
  // 左边菜单折叠起来后
  .dark_main_collapse {
    // 左边菜单
    .dark_main_left {
      width: 64px;
      .dark_main_left_collapseBtn {
        text-align: center;
        padding: 0;
      }
    }
    // 右侧的主要展示区域
    .dark_main_show {
      margin-left: 94px;
    }
    // 底部
    .dark_footer {
      margin-left: 94px;
    }
  }
}
@media (max-width: 1680px) {
  .darkContent {
    .dark_header {
      // logo部分
      .dark_header_logo {
        width: 880px;
        margin-left: -440px;
        background: url('../images/logo_bg_880.png') 50% 50% no-repeat;
      }
      // 左边的时间
      .dark_header_time {
        width: 320px;
        background: url('../images/time_bg_320.png') 50% 50% no-repeat;
      }
    }
  }
}
// 1、没有左右区分的页面（布局的展示方式为：标题 + 检索 + 表格 + 按钮和页码）
.page_mainContent,
.page_rightContent,
.el-dialog {
  width: 100%;
  padding: 20px 0;
  // 搜索的区域
  .page_searchContent {
    width: 50%;
    margin-bottom: 20px;
    // 检索区域右侧展示按钮部分
    .page_searchBtns {
      width: 100%;
      height: 36px;
      text-align: right;
    }
  }
  // 表格区域
  .page_tableContent{
    width: 100%;
    min-height: 200px;
  }
  // 展示页码和按钮就的区域
  .page_bottomContent{
    width: 100%;
    height: 36px;
    margin-top: 20px;
    // 左边展示按钮的部分
    .page_btnsContent{
      float: left;
    }
    // 右边显示页码
    .page_paginationContent{
      float: right;
      padding-top: 3px;
    }
  }
}
// tab的样式
.el-tabs--border-card {
  background-color: transparent;
  border-color: $theme_border_color;
  .el-tabs__header {
    background-color: transparent;
    border-color: $theme_border_color;
    .el-tabs__item {
      background-color: transparent;
    }
    .el-tabs__item.is-active {
      border-color: transparent;
      color: #fff;
      background-color: rgba(21, 129, 177, .5);
    }
  }
}
// 可编辑的表格的添加按钮的样式
.addColumn,
.addBtn {
  width: 100%;
  padding-left: 20px;
  height: 30px;
  background: $theme_table_th_bg_color;
  p {
    width: 150px;
    line-height: 30px;
    font-size: 14px;
    color: $theme_main_color;
    font-weight: 600;
    cursor: pointer;
    &:hover {
      color: $theme_main_hover_color;
    }
  }
}
// 可编辑表格的编辑状态
.editStatus,
.clickStatus {
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  display: block;
  i {
    font-size: 20px;
    vertical-align: -3px;
  }
}
// 修改按钮的样式
.el-button--primary {
  background:rgba(46, 50, 116, .5);
  border: 1px solid rgba(2, 213, 250, .5);
  padding: 0 20px !important;
  height: 32px !important;
  line-height: 30px !important;
  border-radius: 4px;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background:rgba(46, 50, 116, .8);
  border: 1px solid rgba(2, 213, 250, 1);
}
.el-button--info:hover,
.el-button--info:focus {
  background:rgba(46, 50, 116, .8);
  border: 1px solid rgba(2, 213, 250, 1);
  color: rgba(255, 255, 255, 1);
}
.el-button--info {
  background:rgba(46, 50, 116, .5);
  border: 1px solid rgba(2, 213, 250, .5);
  padding: 0 20px !important;
  height: 32px !important;
  line-height: 30px !important;
  border-radius: 4px;
  color: rgba(255, 255, 255, .7);
}
.el-button--text {
  color: $theme_font_color;
}
.el-button--text:hover {
  color: $theme_main_hover_color
}
.el-button--primary.is-disabled,
.el-button--info.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--info.is-disabled:hover,
.el-button--primary.is-disabled:focus,
.el-button--info.is-disabled:focus {
  background:rgba(46, 50, 116, .3);
  border: 1px solid rgba(2, 213, 250, .3);
  color: rgba(255, 255, 255, .3);
}
// 带返回的头部的样式
.el-page-header {
  padding: 0 1%;
  height: 46px;
  line-height: 46px;
  color: #fff;
  font-size: 16px;
  .el-page-header__content {
    color: #fff;
  }
}
// 弹窗高度的限制
.show_content{
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  &::-webkit-scrollbar{
    width: 6px;
    height: 8px;
    cursor: pointer;
  }
  &::-webkit-scrollbar-track{
    background: rgba(21,130,178,.5);
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb{
    background: rgba(21,130,178,1);
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: $theme_main_hover_color;
  }
}
.el-form {
  &::-webkit-scrollbar{
    width: 6px;
    height: 8px;
    cursor: pointer;
  }
  &::-webkit-scrollbar-track{
    background: rgba(21,130,178,.5);
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb{
    background: rgba(21,130,178,1);
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: $theme_main_hover_color;
  }
}
@media(max-width: 1367px) {
 .show_content{
    max-height: 320px;
  }
}
.host_search_list {
  width: 100%;
  height: 32px;
  margin-bottom: 18px;
  margin-top: 0;
  li {
    float: left;
    line-height: 30px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid #0e6979;
    color: #fff;
    margin-right: 20px;
    border-radius: 6px;
    cursor: pointer;
    background-color: transparent;
    &:hover,
    &.active {
      border-color: $theme_main_color;
      background-color: transparent;
    }
  }
}